<!-- 呈现卷子的组件，由多个QuestionItem组成 -->
<template>
  <div
    v-loading="false"
    class="px-5 py-5 flex as-vertical"
    element-loading-text="正在加载..."
  >
    <!-- 试卷标题 -->
    <h1 class="is-size-4 mb-4">
      <!-- <span class="has-text-weight-bold"></span> -->
      <span class="has-text-weight-bold">{{ paperTitle }}</span> · 预览
    </h1>

    <!-- 一、单选题 -->
    <div v-if="singleQuestions.length !== 0">
      <h2 class="is-size-5 mt-4">单选题</h2>
      <el-divider />
      <div v-for="(item, index) in singleQuestions" :key="index">
        <question-item
          :id="'question' + item.id"
          :ref="'question' + item.id"
          :qid="item.id"
          :index="index + 1"
          :subject="item.subject"
          mode="exam"
          :type="item.type"
          :correct="item.correct"
          :question="item.info.desc"
          :choices="item.info.choice"
          :single-selected="item.singleSelected"
          :multiple-selected="item.multipleSelected"
        />
      </div>
    </div>

    <!-- 二、多选题 -->
    <div v-if="multipleQuestions.length !== 0">
      <h2 class="is-size-5 mt-5">多选题</h2>
      <el-divider />
      <div v-for="(item, index) in multipleQuestions" :key="index">
        <question-item
          :id="'question' + item.id"
          :ref="'question' + item.id"
          :qid="item.id"
          :index="index + 1"
          :subject="item.subject"
          mode="exam"
          type="multiple"
          :correct="item.correct"
          :question="item.info.desc"
          :choices="item.info.choice"
        />
      </div>
    </div>

    <!-- 三、填空题 -->
    <!-- <h2 class="is-size-5 mt-5">三、填空题</h2>
    <el-divider /> -->
  </div>
</template>

<script>
import QuestionItem from '@/components/QuestionItem.vue'
import variables from '@/styles/variables.scss'

export default {
  components: {
    QuestionItem
  },
  props: {
    paperId: {
      type: String,
      require: true,
      default: ''
    },
    paperTitle: {
      type: String,
      require: true,
      default: '...'
    },
    // 题目列表，应当包含单选题和多选题
    singleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    multipleQuestions: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data() {
    return {
      recovering: true,
      drawer: false
    }
  },
  watch: {},
  mounted() {
    console.log(this.singleQuestions)
    console.log(this.multipleQuestions)
  },
  updated() {},
  variables() {
    return variables
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.qlist-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 260px;
}

.qlist-item {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.selected {
  background-color: $primaryColor;
  color: white;
}

.unselected {
  background-color: white;
  color: black;
}
</style>
